<template>
  <!-- 图片预览 -->
  <div class="image-preview flex-center" @click="onImagePreviewClicked">
    <!-- <cube-slide :loop="false" :auto-play="false" ref="slide" :items="imageList">
      <cube-slide-item
      class="flex-center"
        v-for="(item, i) in imageList"
        :key="i"
      >
        <img :src="item.oriImage" alt class="preview-image"/>
      </cube-slide-item>

      <template slot="dots" slot-scope="props">
        <div class="white-text">{{ props.current + 1 }} / {{ props.dots.length }}</div>
      </template>
    </cube-slide> -->
      <img :src="image" alt class="preview-image"/>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";

@Component
export default class ImagePreview extends Vue {
  @Prop({})
  imageList: any;

  @Prop({})
  image: any

  @Prop({})
  currentImage: any;

  protected mounted() {}

  /**
   * 取消预览
   */
  private onImagePreviewClicked() {
    this.$emit('hide');
  }
}
</script>

<style lang="stylus" scoped>
.image-preview
  position fixed
  width 100%
  height 100%
  background black
  padding-bottom 16px
  box-sizing border-box
  z-index 9999

.preview-image
  width 100%
  max-height 100% 

.white-text
  color white
  font-size 13px

.cube-slide-dots
  height 14px!important
</style>

